<!--
  ~ Copyright (c) Jack魏 2024 - 2024, All Rights Reserved.
  -->

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <meta name="keywords" content="页面表编辑页面">
  <link rel="icon" th:href="@{/images/yiyi.ico}" type="image/x-icon">
  <meta name="description" content="页面表编辑页面">
  <meta name="author" content="Jack魏">
  <title>页面表编辑页面</title>
  <!-- layui -->
  <link type="text/css" rel="stylesheet" th:href="@{/layui/css/layui.css}" media="all"/>
  <script type="text/javascript" th:src="@{/layui/layui.js}" charset="utf-8"></script>
  <!-- jQuery -->
  <script type="text/javascript" th:src="@{/js/jquery.min.js}"></script>
  <!-- config 常用配置 -->
  <script type="text/javascript" th:src="@{/js/config.js}"></script>
  <!-- 常用工具类 -->
  <script type="text/javascript" th:src="@{/js/MyUtils.js}"></script>
  <!-- CSS -->
  <link type="text/css" rel="stylesheet" th:href="@{/css/index.css}" media="all"/>
</head>
<body>

<div class="common-container">
  <div id="page-manage-id"></div>
</div>

<script th:inline="javascript">
  // js里面Model取值，注意上面的需要使用内联js
  let pageList = [[${pageList}]];

  // 设置全部展开
  function setSpread(pageList) {
    return pageList.map(obj => {
      if (obj.children && obj.children.length > 0) {
        obj.spread = true;
        setSpread(obj.children)
      } else {
        obj.spread = true;
      }
    })
  }

  setSpread(pageList)

  let indexNode = [{id: 0, name: '根目录', spread: true, children: pageList}]
  console.log('所有的页面数据：', indexNode)

  layui.use(function () {
    var tree = layui.tree;
    var layer = layui.layer;

    // 渲染
    tree.render({
      elem: '#page-manage-id',
      data: indexNode,
      customName: { // 自定义 data 字段名
        id: 'id',
        title: 'name',
        children: 'children',
        spread: 'spread',
      },
      showCheckbox: false,  // 是否显示复选框
      onlyIconControl: true,  // 是否仅允许节点左侧图标控制展开收缩
      edit: ['add', 'del'], // 开启节点的右侧操作图标
      id: 'id',
      isJump: false, // 是否允许点击节点时弹出新窗口跳转
      click: function (obj) {
        var data = obj.data;  //获取当前点击的节点数据
        let id = data.id;
        // 打开编辑窗口
        layer.open({
          title: '页面编辑',
          type: 2,
          area: ['50%', '80%'],
          content: `sysPageEditView?id=${id}&parentId=${data.parentId}`
        });
      },
      operate: function (obj) {
        var type = obj.type; // 得到操作类型：add、edit、del
        var data = obj.data; // 得到当前节点的数据
        var elem = obj.elem; // 得到当前节点元素

        // Ajax 操作
        var id = data.id; // 得到节点索引
        console.log('当前节点数据', data)
        if (type === 'add') { // 增加节点
          // 打开编辑窗口
          layer.open({
            title: '页面新增',
            type: 2,
            area: ['50%', '80%'],
            content: `sysPageEditView?id=&parentId=${id}`,
            end: function (index, layero, that) {
              layer.msg('新增成功~', {icon: 6});
              setTimeout('window.location.reload()', 500);
            }
          });
        } else if (type === 'del') { // 删除节点
          console.log('删除页面----')
          if (id <= 0) {
            layer.msg('根目录不能删除！', {icon: 2});
            setTimeout('window.location.reload()', 1000);
          }
          let result = MyAjax(POST, {id, isDel: 1}, 'editSysPage', {
            async: false,
            result: true,
            msg: false
          })
          console.log(result)
          if (isOk(result)) {
            console.log("操作成功，刷新数据");
          }
        }
      }
    });
  });
</script>
</body>
</html>